<template>
  <div class="calculator">
    <div class="screen">{{ screenStr }}</div>
    <div class="pad clearFix">
      <button @click="enterNum('1')">1</button>
      <button @click="enterNum('2')">2</button>
      <button @click="enterNum('3')">3</button>
      <button @click="delNum" class="del">删除</button>
      <button @click="enterNum('4')">4</button>
      <button @click="enterNum('5')">5</button>
      <button @click="enterNum('6')">6</button>
      <button @click="screenStr = ''" class="emp">清空</button>
      <button @click="enterNum('7')">7</button>
      <button @click="enterNum('8')">8</button>
      <button @click="enterNum('9')">9</button>
      <button @click="ok" class="ok">ok</button>
      <button @click="enterNum('0')" class="zero">0</button>
      <button @click="enterNum('.')">.</button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Watch} from 'vue-property-decorator';

@Component
export default class Calculator extends Vue {
  screenStr = '0';
  isFloat = false;

  //计算器输入数字
  enterNum(num: string) {
    if (this.screenStr.length > 16) return;

    let enterNum: string = num;

    //如果已经是小数，则不会有多余的 .
    if (this.isFloat && enterNum === '.') enterNum = '';

    //当第一次输入时，输入非 . 的情况下，把0去掉
    if (/^0$/.test(this.screenStr) && enterNum !== '.') {
      //用户输入的是非小数
      this.screenStr = '';
    }
    this.screenStr += enterNum;
  }

  delNum() {
    this.screenStr = this.screenStr.substr(0, this.screenStr.length - 1);
  }

  ok() {
    let screenNUm = this.isFloat ? Number.parseFloat(this.screenStr) : Number.parseInt(this.screenStr);
    this.$store.commit('updateRecord',{name:'amount',value:screenNUm})
    this.screenStr = '0';
    this.$emit('commitRecord')
  }

  //监视screenStr如果为空，则设置默认值为0
  @Watch('screenStr')
  getScreenStr(newValue: string) {
    //如果里面有 . ，则标记浮点型为真
    this.isFloat = /\./.test(newValue);
    if (newValue === '') this.screenStr = '0';
  }
}
</script>

<style lang="scss" scoped>
.calculator {

  .screen {
    font-size: 36px;
    text-align: right;
    padding: 9px 12px;
    box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .6);
    background-color: #fff;
  }

  .pad {
    flex-wrap: wrap;

    button {
      float: left;
      width: 25%;
      height: 64px;
      font-size: 36px;
      background-color: transparent;
      border: none;

      $bg: #eee;

      &:nth-child(1) {
        background-color: $bg;
      }

      &:nth-child(2), &:nth-child(5) {
        background-color: darken($bg, 4%);
      }

      &:nth-child(3), &:nth-child(6), &:nth-child(9) {
        background-color: darken($bg, 2*4%);
      }

      &:nth-child(4), &:nth-child(7), &:nth-child(10) {
        background-color: darken($bg, 3*4%);
      }

      &:nth-child(8), &:nth-child(11), &:nth-child(13) {
        background-color: darken($bg, 4*4%);
      }

      &:nth-child(14) {
        background-color: darken($bg, 5*4%);
      }

      &:nth-child(12) {
        background-color: darken($bg, 6*4%);
      }

      &.del, &.emp {
        font-size: 24px;
      }
    }


    .ok {
      height: 64*2px;
      float: right;
    }

    .zero {
      width: 50%;
    }
  }
}

</style>